<template>
  <div class="app">
    <div class="doctor-info">
      <van-row>
        <van-col span="4">
          <img
            class="doctor-avatar"
            src="https://example.com/avatar.jpg"
            alt="医生头像"
          />
        </van-col>
        <van-col span="20">
          <div class="doctor-name">
            周和平 <span class="doctor-title">副主任医师</span>
          </div>
          <div class="doctor-department">就诊科室：骨科</div>
          <div class="doctor-hospital">出诊医院：广东崇爱康复医院</div>
        </van-col>
      </van-row>
    </div>
    <div class="other事项">
      <div class="section-title">
        <van-icon name="info-circle-o" />
        <span>其他事项</span>
      </div>
      <div class="fee-info">
        <span>医事服务费：</span>
        <span class="fee-price">¥20</span>
        <span>(到院支付)</span>
      </div>
      <div class="fee-note">
        <van-icon name="information-line" />
        <span
          >请凭有效证件到医院门诊取号，医事服务费均在就诊时由医院直接收取，本平台不收取任何费用</span
        >
      </div>
      <div class="expertise">
        <p>
          擅长：治疗颈椎病、腰椎间盘突出、眩晕、脑梗塞、三叉神经痛、神经衰弱、神经症、面神经炎、晕厥、桡神经麻痹、痴呆综合征、头痛、坐骨神经痛、帕金森病、急性脊髓炎等常见病、多发病和疑难病，运用物理医学与康复常用的各种治疗手段，预防、诊断和治疗本专业常见病、多发病和疑难病。特别对神经、骨科等疾病康复具有较丰富的理论和实践经验。
        </p>
      </div>
    </div>
    <div class="patient-section">
      <div class="section-title">
        <van-icon name="info-circle-o" />
        <span>就诊人选择</span>
      </div>
      <van-field
        v-model="selectedPatient.name"
        label="就诊人"
        placeholder="填写就诊人姓名"
        :button-text="selectPatientText"
        @click-button="openPatientSelector"
        @click="openPatientSelector"
      />
      <!-- 弹出选择就诊人的弹框 -->
      <van-popup
        v-model:show="showPatientSelector"
        position="bottom"
        class="patient-selector-popup"
      >
        <div class="patient-list">
          <div
            class="patient-item"
            v-for="(patient, index) in patientList"
            :key="index"
            @click="selectPatientItem(patient)"
          >
            <div class="patient-name">{{ patient.name }}</div>
            <div class="patient-gender">{{ patient.gender }}</div>
            <div class="patient-idCard">{{ patient.idCard }}</div>
          </div>
        </div>
      </van-popup>
      <van-button @click="confirmRegistration" color="blue"
        >确认预约</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Icon, Row, Col, Button, Field, Popup } from "vant";

// 注册 Vant 组件
const components = {
  VanIcon: Icon,
  VanRow: Row,
  VanCol: Col,
  VanButton: Button,
  VanField: Field,
  VanPopup: Popup,
};

// 模拟返回上一页
const goBack = () => {
  // 这里可根据实际路由情况实现返回逻辑，比如使用 vue-router 的 router.back()
  console.log("返回上一页");
};

// 模拟导航功能
const navigate = () => {
  console.log("打开导航");
};

// 就诊人相关
const selectedPatient = ref({
  name: "",
  gender: "",
  idCard: "",
});
const selectPatientText = ref("选择就诊人");
const showPatientSelector = ref(false);
const patientList = ref([
  {
    name: "张三",
    gender: "男",
    idCard: "123456",
  },
  {
    name: "李四",
    gender: "女",
    idCard: "654321",
  },
]);

const openPatientSelector = () => {
  showPatientSelector.value = true;
};

const selectPatientItem = (patient) => {
  selectedPatient.value = {
    ...patient,
  };
  showPatientSelector.value = false;
  selectPatientText.value = selectedPatient.value.name;
};
const confirmRegistration = () => {
  // 收集预约信息
  const appointmentInfo = {
    patient: selectedPatient.value,
    // 可以添加更多预约信息，如医生、时间等
  };
  // 模拟保存到后端
  console.log("保存预约信息到后端:", appointmentInfo);
  // 更新页面状态，例如关闭弹窗、清空选择等
  showPatientSelector.value = false;
  selectedPatient.value = {
    name: "",
    gender: "",
    idCard: "",
  };
  selectPatientText.value = "选择就诊人";
};
</script>

<style scoped>
.app {
  padding: 16px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.more-actions {
  display: flex;
  gap: 10px;
}

.doctor-info {
  margin-bottom: 16px;
}

.doctor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.doctor-name {
  font-size: 18px;
  margin-bottom: 5px;
}

.doctor-title {
  color: #666;
}

.doctor-department,
.doctor-hospital {
  font-size: 16px;
  color: #333;
}

.other事项 {
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.fee-info {
  font-size: 16px;
  margin-bottom: 5px;
}

.fee-price {
  color: #f60;
}

.fee-note {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.expertise p {
  font-size: 15px;
  line-height: 1.5;
}

.hospital-address {
  margin-bottom: 16px;
}

.address-text {
  font-size: 16px;
}

.patient-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.patient-selector-popup {
  padding: 16px;
}

.patient-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.patient-item {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}

.patient-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.patient-gender,
.patient-idCard {
  font-size: 14px;
  color: #666;
}
</style>
